<template>
  <div class="app-container" style="background-color:rgba">
    <el-card style="margin-bottom:30px">
      <div>
        <el-row style="margin-bottom:30px">
          <span>Basic Information</span>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Id</span></el-col>
          <el-col :span="10"><span>{{ orderdetailsinfo.id }}</span></el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Title</span></el-col>
          <el-col :span="10"><span>{{ orderdetailsinfo.title }}</span></el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Created By</span></el-col>
          <el-col :span="10"><span>{{ orderdetailsinfo.user_name }}</span></el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Create time</span></el-col>
          <el-col :span="10"><span>{{ orderdetailsinfo.create_time }}</span></el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Assigned By</span></el-col>
          <el-col :span="10"><span>{{ orderdetailsinfo.staff_names }}</span></el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Room & Location</span></el-col>
          <el-col :span="10"><span>{{ orderdetailsinfo.desc }}</span></el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Client/Site</span></el-col>
          <el-col :span="10"><span>{{ orderdetailsinfo.hotel_name }}</span></el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Work Instruction</span></el-col>
          <el-col :span="17">
            <span>{{ winames }}</span>
          </el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Start Time</span></el-col>
          <el-col :span="10">
            <span>{{ orderdetailsinfo.start_time }}</span>
          </el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Due Date</span></el-col>
          <el-col :span="10"><span>{{ orderdetailsinfo.due_date }}</span></el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Completed Time</span></el-col>
          <el-col :span="10"><span>{{ orderdetailsinfo.complete_time }}</span></el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Priority</span></el-col>
          <el-col :span="10"><span>{{ orderdetailsinfo.priority_name }}</span></el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Status</span></el-col>
          <el-col :span="10"><span>{{ orderdetailsinfo.status_name }}</span></el-col>
        </el-row>

        <el-row :gutter="30" style="margin-bottom:10px">
          <el-col :span="5"><span style="margin-right:10px;">Feedback</span></el-col>
          <el-col :span="5"><span>{{ score_desc }}</span></el-col>
        </el-row>

      </div>
    </el-card>

    <el-card style="margin-bottom:30px">
      <template>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="sign_name"
            label="sign name"
          />
          <el-table-column
            prop="sign_image"
            label="sign image"
          >
            <template slot-scope="scope">
              <el-image style="width: 70px;" :src="scope.row.sign_image" :preview-src-list="[scope.row.sign_image]" />
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>

    <section>
      <my-test
        v-for="(item, index) in sexType"
        :key="index"
        :index="index"
        :item-c="item"
      />
    </section>

  </div>
</template>
<script>
import MyTest from './witablelist.vue'
import {
  getdetails,
  getdictionary
} from '@/api/order/index'

export default {
  components: {
    MyTest
  },
  data() {
    return {
      tableData: [],
      orderdetailsinfo: {},
      witypeslist: [],
      witypesids: [],
      prioritylist: [],
      winames: '',
      staffsName: '',
      sexType: [],
      sign_name: '',
      score_desc: ''
    }
  },
  created() {
    this.getorderdetailsinfo()
    this.getwitypes()
    this.getpriority()
  },
  methods: {
    async getorderdetailsinfo() {
      this.orderdetailsinfo = await getdetails({ id: this.$route.query.id })
      console.log(this.orderdetailsinfo)
      if (this.orderdetailsinfo.work_type === 1) {
        this.winames = this.orderdetailsinfo.wi.map(function(v) { return v.title }).toString()
      } else {
        this.winames = this.orderdetailsinfo.ad_hoc_work.toString()
      }
      this.score_desc = this.orderdetailsinfo.score_desc
      this.staffsName = this.orderdetailsinfo.staffs.map(function(v) { return v.user_login }).toString()
      this.sexType = this.orderdetailsinfo.wi
      this.orderdetailsinfo.create_time = this.orderdetailsinfo.create_time.replace(/\-/g, '').replace(/^(\d{2})(\d{2})(\d{4})$/, '$3-$2-$1')
      this.orderdetailsinfo.update_time = this.orderdetailsinfo.update_time.replace(/\-/g, '').replace(/^(\d{2})(\d{2})(\d{4})$/, '$3-$2-$1')
      this.tableData = this.orderdetailsinfo.sign_list
    },
    async getwitypes() {
      this.witypeslist = await getdictionary({ dict_type: 'wi_type' })
    },
    async getpriority() {
      this.prioritylist = await getdictionary({ dict_type: 'priority' })
    }

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>

<style>
.el-table .warning-row {
  background: rgba(9, 124, 233, 0.836);
}
.el-table .success-row {
  background: #06e737;
}
.el-icon-circle-close {
  color: red
}
</style>
